import 'package:flutter/material.dart';
import 'package:flutterdemo/pages/home_page.dart';
import 'package:flutterdemo/pages/mine_page.dart';
import 'package:flutterdemo/pages/search_page.dart';
import 'package:flutterdemo/pages/travel_page.dart';

//页面的点击跳转四个主要页面 状态可变
class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _currentIndex = 0;
  final PageController _controller = PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: const <Widget>[
          HomePage(),
          SearchPage(
            hideLeft: true,
          ),
          TravelPage(),
          MinePage(),
        ],
        physics: const NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        //根据一个全局变量  进行页面显示
        currentIndex: _currentIndex,
        //为了能和用户选择进行联动
        onTap: (index) {
          _controller.jumpToPage(index);
          setState(() {
            //改变当前的状态
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.fixed,
        items: [
          //定义显示的icon
          _bottomItem('首页', Icons.home, 0),
          _bottomItem('搜索', Icons.search, 1),
          _bottomItem('旅拍', Icons.camera_alt, 2),
          _bottomItem('我的', Icons.account_circle, 3),
        ],
      ),
    );
  }

  //选择更改颜色  选中为蓝色  未选中为灰色
  _bottomItem(String title, IconData icon, int index) {
    return BottomNavigationBarItem(
        icon: Icon(
          icon,
          color: _defaultColor,
        ),
        activeIcon: Icon(
          icon,
          color: _activeColor,
        ),
        label: title);
  }
}
